<template>
  <div id="tradeOrderDetail">
    <NavBar title="hC853n" />
    <div class="user-info">
      <div class="avatar">
        <img src="https://kmapi.flash688.com/picHead/2021080210521935092.jpg" />
        <div class="meta">
          <div class="name">hC853n</div>
          <div class="level">Lv4</div>
        </div>
      </div>
      <div class="tags">
        <div class="tag">
          <div class="tag-title">收益率</div>
          <div class="tag-val">13.00%</div>
        </div>
        <div class="tag">
          <div class="tag-title">准确率</div>
          <div class="tag-val">13.00%</div>
        </div>
        <div class="tag">
          <div class="tag-title">跟谁人数</div>
          <div class="tag-val">11</div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab active">数据统计</div>
      <div
        class="tab"
        v-for="(item, index) in tab"
        :key="index"
        @click="to('/tradeOrderPosition')"
      >
        {{ item }}
      </div>
    </div>
    <div class="datas">
      <div class="title">数据统计</div>
      <Grid border :column-num="3">
        <Grid-item v-for="value in 11" :key="value">
          <template #default>
            <div class="val">
              62
            </div>
            <div class="text">当前订单</div>
          </template>
        </Grid-item>
      </Grid>
    </div>
    <div class="block"></div>
    <div class="history datas">
      <div class="title">历史交易品种</div>
      <div class="list">
        <div class="item" v-for="value in 7" :key="value">
          <div class="type">
            <div>奥元/美元</div>
            <div>AUDUSD</div>
          </div>
          <Progress
            :percentage="(100 / 19) * 12"
            pivot-text=""
            stroke-width="13"
            color="rgb(75, 207, 125)"
          />
          <div class="order">
            <div class="red">买入单: 7</div>
            <div class="green">卖出单: 12</div>
          </div>
        </div>
      </div>
    </div>
    <div class="follow-btn" @click="to('/tradeOrderFollow')">跟随高手</div>
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
import { Grid, GridItem, Progress } from 'vant'
export default {
  components: {
    Grid,
    GridItem,
    Progress,
    NavBar
  },
  data() {
    return {
      tab: ['当前订单', '历史订单']
    }
  },
  methods: {
    //跳转页面
    to(to) {
      this.$router.push({ path: to })
    }
  }
}
</script>

<style lang="less" scoped>
#tradeOrderDetail {
  padding: 44px 0 55px;
  /deep/.van-nav-bar {
    width: 100vw;
    position: fixed;
    top: 0;
  }
  .user-info {
    border-top: 1px solid #f5f5f5;
    padding: 20px;
    background-color: #fff;
    .avatar {
      display: flex;
      img {
        height: 40px;
        width: 40px;
        flex: 0 0 45px;
        background-color: transparent;
        border-radius: 500px;
      }
      .meta {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 17px;
        }
        .level {
          width: 41px;
          height: 15px;
          background-color: #494948;
          border-radius: 7px;
          font-size: 12px;
          color: #f4cf94;
          text-align: center;
        }
      }
    }
    .tags {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .tag-title {
        font-size: 13px;
        color: #7a7a7a;
      }
      .tag-val {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        line-height: 21px;
      }
    }
  }
  .tabs {
    color: #646464;
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    font-size: 14px;
  }
  .active {
    font-size: 17px;
    color: #476ecb;
    font-weight: 600;
  }
  .title {
    font-size: 15px;
    font-weight: 600;
  }
  .datas {
    padding: 10px;
    .van-hairline--top::after {
      border: none;
    }
    .van-grid {
      margin: 10px 0;
    }
    /deep/.van-grid-item__content--center {
      margin: 0 2px;
      background: #f5f6fb;
      border-bottom: 4px solid #fff;
      .val {
        font-size: 16px;
        font-weight: 600;
      }
      .text {
        font-size: 12px;
        color: #476ecb;
        text-align: center;
      }
    }
  }
  .block {
    background-color: #f5f5f5;
    width: 100%;
    height: 10px;
  }
  .history {
    .list {
      margin-top: 10px;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .type {
          div:nth-child(1) {
            font-size: 15px;
            font-weight: 500;
          }
          div:nth-child(2) {
            color: #b0b0b0;
            font-size: 12px;
          }
        }
        .van-progress {
          width: 160px;
          border-radius: 100px;
          background: rgb(255, 77, 77);
        }
        .order {
          font-size: 12px;
          .red {
            color: #cd4e65;
          }
          .green {
            color: #1cad90;
          }
        }
      }
    }
  }
  .follow-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 55px;
    text-align: center;
    background-color: #ff822e;
    color: #fff;
    font-size: 17px;
  }
}
</style>
